<template>
  <div class="index">
    <h3 class="title">{{ obj.title }}</h3>
    <div class="time-row">
      <span>{{ (obj.createTime).substring(0, 10)}}</span>
      <span>{{ obj.view }}阅读</span>
    </div>
    <div class="takeway">
      {{ obj.brief }}
    </div>
    <div class="content" v-html="obj.content"></div>
    <div class="origin">文章来源: {{ obj.source }}</div>
  </div>
</template>

<script>
import API from '@/services/index'
export default {
	name: 'index',

	data() {
		return {
			obj: {
				title: '',
				createTime: '',
				view: 500,
				brief: '',
				content: '',
				source: '',
			},
			content: '<img src="https://pics0.baidu.com/feed/34fae6cd7b899e51ff0d37463bf19d3bc9950dbb.jpeg?token=96e55d521b92c71367e266c09a1ee3b9" />',
		}
	},
	created() {
		this.getInfor()
	},
	methods: {
		async getInfor() {
			const data = await API.getAgriNewsDetail({
				params: {
					id: this.$route.params.id,
				},
			})
			console.log(data.content)
			this.obj = data
			console.log(this.obj)
		},
	},
}
</script>

<style lang='scss' scoped>
.index {
  margin: 0;
  font-size: 16px;
  .title {
    margin-bottom: 10px;
    font-size: 20px;
  }
  .time-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #ccc;
  }
  .takeway {
    margin-bottom: 10px;
    color: #1681d8;
  }
  .content {
    line-height: 25px;
  }
  .origin {
    margin: 10px 0;
    color: #1681d8;
  }
}
</style>
<style lang="scss">
img{
      max-width: 100%;
  }
</style>
